<template>
  <!-- 车辆库存 > 车辆出库 -->
  <div>
    <TopFilter
      :list="topFilterList"
      :cols="3"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="true"
      :onColumnsChange="columns => this.columns = columns"
    >
    </FilterTable>
    <BaseDialog
        :visible.sync="visible"
        :title="dialogTitle"
        destroyOnClose
        width="1050px"
        :containerStyle="{height: '100%', overflow: 'auto'}">
        <ReceiptDetail :type="handleType" :rowData="detailData" @close="closeHandler"></ReceiptDetail>
    </BaseDialog>
  </div>
</template>
<script>
import { getPubPayobj } from '@/api/capitalsettle/vehicle/settlecollection';
import ReceiptDetail from './receiptdetail'
import { dictionary } from '@/utils/dictMixin';
import { notifyAction } from '@/utils';
import moment from 'moment'
export default {
  name: 'SearchSettleCollection',
  mixins: [dictionary],
  components: {
    ReceiptDetail
  },
  data () {
    return {
      topFilterList: this.createTopFilters(), // 查询区条件
      columns: this.createTableColumns(), // 列表区数据
      fetchApi: getPubPayobj, // 条件查询接口
      fetchParams: {}, // 查询参数
      detailData: {},
      visible: false,
      dialogTitle: '整车订单收款',
      handleType: 'show'
    }
  },
  created () {
  },
  mounted () {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    changeHandle (val){
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    createTopFilters () {
      return [
        {
          type: 'INPUT',
          label: '销售订单号',
          fieldName: 'balanceNo',
          placeholder: '请输入...',
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'name',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '手机号码',
          fieldName: 'phone',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '是否结清',
          fieldName: 'payOff',
          placeholder: '请选择',
          itemList: this.createDictList('1004')
        },
        {
          type: 'SELECT',
          label: '业务类型',
          fieldName: 'balanceType',
          placeholder: '请选择',
          itemList: this.createDictList('1043')
        },
        {
          type: 'RANGE_DATE',
          label: '开票日期',
          fieldName: 'startDate|overDate',
          placeholder: '请选择',
        }
      ]
    },
    createTableColumns () {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.receiptHandleFun(props.row)}>
                  收款
                </el-button>
                <el-button size="mini" type="text" onClick={() => this.detailHandleFun(props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '销售订单号',
          dataIndex: 'balanceNo',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '业务类型',
          dataIndex: 'balanceType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1043'),
          render: props => {
            return <span>{this.createDictText(props.row.balanceType, '1043')}</span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true,
          filter: true,
          width: 160,
          filterType: 'input'
        },
        {
          title: '是否结清',
          dataIndex: 'payOff',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: props => {
            return <span>{this.createDictText(props.row.payOff, '1004')}</span>;
          }
        },
        {
          title: '产品代码',
          dataIndex: 'productNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'name',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '开票日期',
          dataIndex: 'invoiceDate',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{props.row.invoiceDate?props.row.invoiceDate.split(" ")[0]:''}</span>;
          }
        },
        {
          title: '订单应收',
          dataIndex: 'receivableAmount',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '订单已收',
          dataIndex: 'receiveAmount',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '欠款总额',
          dataIndex: 'arearAmount',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '是否开票',
          dataIndex: 'invoiceTag',
          sorter: true,
          filter: true,
          filterItems: this.createDictList('1004'),
          render: props => {
            return <span>{this.createDictText(props.row.invoiceTag, '1004')}</span>;
          }
        },
        {
          title: '备注',
          dataIndex: 'remark',
          sorter: true,
          filter: true,
          showOverflowTooltip:true,
          filterType: 'input'
        },
      ]
    },
    receiptHandleFun (row) {
      console.log('收款')
      this.detailData = row
      this.visible = true
      this.handleType = 'edit'
    },
    detailHandleFun (row) {
      console.log('明细')
      this.detailData = row
      this.visible = true
      this.handleType = 'show'
    },
    // 字典数据使用前预处理
    preDictHandler(val, code){
      let resultText = val && String.prototype.includes.call(val, code) ? this.createDictText(val, code) : val;
      return resultText;
    },
    // 日期预处理
    preDateHandler(val, formatCode='YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
    closeHandler (val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
